<template>
  <div>
    <el-button type="primary" @click="toAdd">+添加</el-button>
    <el-divider />
    <div class="flex flex-col items-start gap-4">
      <el-segmented v-model="value" :options="options" size="default" @change="handleChange" />
    </div>

    <el-table :data="nurseLevelList" stripe style="width: 100%">
      <el-table-column type="index" label="序号" width="80"/>
      <el-table-column prop="levelName" label="护理级别"  />
      <el-table-column prop="levelStatus" label="状态" >
        <template #default="scope">
          <el-tag v-if="scope.row.levelStatus == 1" type="success">启用</el-tag>
          <el-tag v-else type="danger">停用</el-tag>
        </template>
      </el-table-column>
      <el-table-column  label="操作">
        <template #default="scope">
          <el-button type="primary"  @click="toEdit(scope.row)"><el-icon><Edit /></el-icon>修改</el-button>&nbsp;&nbsp;
          <el-button type="success" @click="toWH(scope.row)"><el-icon><Star /></el-icon>护理项目配置</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增/修改对话框 -->
    <el-dialog v-model="dialogFormVisible" :title="title" width="500">
      <el-form :model="nurseLevel">
        <el-form-item label="护理级别" >
          <el-input v-model="nurseLevel.levelName" autocomplete="off" :disabled="disabled"/>
        </el-form-item>
        <el-form-item label="状态" >
          <el-select v-model="nurseLevel.levelStatus" placeholder="请选择护理状态">
            <el-option label="启用" :value="1" />
            <el-option label="停用" :value="2" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="addOrEditNurseLevel">
            保存
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import NurseLevelApi from '@/api/NurseLevel.js'
export default {
  data() {
    return {
      options: ['启用', '停用'],
      value: '启用',
      levelStatus: 1,
      nurseLevelList:[],
      title:'添加护理级别',
      dialogFormVisible: false,
      nurseLevel:{},
      disabled:false
    }
  },
  methods: {
    toWH(row){
      this.$router.push({
        path:'/nurseItemToLevel',
        query:{
          levelId:row.id,
          levelName:row.levelName
        }
      })
    },
    addOrEditNurseLevel(){
      if(this.title == '添加护理级别'){
        NurseLevelApi.addNurseLevel(this.nurseLevel).then(res=>{
          this.$message({
            type: 'success',
            message: '添加成功'
          })
          this.dialogFormVisible = false
          this.listNurseLevel();
        })
      }else{
        NurseLevelApi.updateNurseLevel(this.nurseLevel).then(res=>{
          this.$message({
            type: 'success',
            message: '修改成功'
          })
          this.dialogFormVisible = false
          this.listNurseLevel();
        })
      }
    },
    toEdit(row){
      this.disabled = true
      this.title = '修改护理级别'
      this.dialogFormVisible = true
      this.nurseLevel = JSON.parse(JSON.stringify(row));
    },
    toAdd(){
      this.disabled = false
      this.title = '添加护理级别'
      this.dialogFormVisible = true
      this.nurseLevel = {}
    },
    handleChange(val) {
      if (val == '启用') {
        this.levelStatus = 1
      } else {
        this.levelStatus = 2
      }
      this.listNurseLevel();
    },
    listNurseLevel() {
      NurseLevelApi.listNurseLevel(this.levelStatus).then(res=>{
        this.nurseLevelList = res.data;
      })
    }
  },
  created() {
    this.listNurseLevel();
  }
}
</script>

<style scoped></style>